<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>personalPage</title>
</head>

<body class="dpflex">
    <div class="flex1 yscroll">
        <header>
            <!-- 头像是html直接插入标签写法 -->
            <div class="avatar">
                <img src="./img/头像.jpg" alt="">
            </div>
            <!-- 头像是背景图写法 -->
            <!-- <div class="avatar"></div> -->
            <i class="iconfont icon-liebiaoye-VIPjiaobiao"></i>
            <div class="userName">用户名</div>
            <div class="signature">个性签名:<span class="signatureContent">xxxxxxxxxxxx</span></div>
        </header>
        <main>
            <div class="topbox">
                <div class="topboxTitleBox dpflex">
                    <div class="topboxTitle">
                        <i class="iconfont icon-zuocelan_tongjishuju"></i>
                        <span>运动数据</span>
                    </div>
                    <i class="iconfont icon-dayuhao"></i>
                </div>
                <ul class="topboxDetails dpflex mt20">
                    <li>
                        <p class="c8a">总运动</p>
                        <div><span class="sportDuration">99999</span><span class="fs16 c10">分钟</span></div>
                    </li>
                    <li>
                        <p class="c8a">本周消耗</p>
                        <div><span class="energyConsumed">99999</span><span class="fs16 c10">千卡</span></div>
                    </li>
                </ul>
            </div>
            <div class="centerbox">
                <div class="centerboxTitleBox dpflex">
                    <div class="centerboxTitle dpflex">
                        <i class="iconfont icon-huizhang"></i>
                        <div>我的运动徽章</div>
                    </div>
                    <i class="iconfont icon-dayuhao"></i>
                </div>
                <ul class="centerboxDetails dpflex">
                    <li>
                        
                    </li>
                    <li>
                        
                    </li>
                    <li>
                    </li>
                </ul>
            </div>
            <div class="bottombox">
                <div class="btn">退出登录</div>
            </div>
        </main>
    </div>
    <input type="file" id="upload">
</body>

</html>